<template>
  <div class="container">
    <div class="common">
      <div class="relative">
        <img src="../../../assets/img/fashionSpace/fashionSpace01.jpg" alt="">
        <span id="share" @click="shareForWechat">分享</span>
      </div>
    </div>
    <div class="module-container"  v-for="(itemList,index) in pageGoodsIdArr" :key="index">
      <img v-lazy="pageImgArr[index*4+1]" alt="">
      <div class="relative">
        <img v-lazy="pageImgArr[index*4+2]" alt="">
        <div class="goods-btn top" @click="goForGoodsDetail(itemList[0].goods_id)">
          <span class="prev">￥<del>{{itemList[0].shop_price}}</del></span>
          <span class="curr">￥<i>{{itemList[0].flash_price}}</i></span>
        </div>
      </div>
      <img v-lazy="pageImgArr[index*4+3]" alt="">
      <div class="relative">
        <img v-lazy="pageImgArr[index*4+4]" alt="">
        <div class="goods-btn bottom" @click="goForGoodsDetail(itemList[1].goods_id)">
          <span class="prev">￥<del>{{itemList[1].shop_price}}</del></span>
          <span class="curr">￥<i>{{itemList[1].flash_price}}</i></span>
        </div>
      </div>
      <div class="wrapper" v-if="pageGoodsIdArr.length>0">
        <div class="scroll-box">
          <div class="scroll-wrapper" :style="{'width':6*2+'rem'}">
            <GoodsItemFive :parentData="subItem" @childEvent="goForGoodsDetail" v-for="(subItem,index) in itemList.slice(2)" :key="index"/>
          </div>
        </div>
      </div>
    </div>
    <div class="more">
      <div class="more-title"><img :src="pageImgArr[13]" alt=""></div>
      <special-item :parentData="item" @childEvent="goForSpecialDetail" v-for="(item,index) in moreData.specialArrList" :key="index"/>
    </div>
  </div>
</template>

<script>
  import GoodsItem from 'components/GoodsItems/lineTwo.vue'
  import GoodsItemFive from 'components/GoodsItems/item05.vue'
  import SpecialItem from 'components/GoodsItems/specialItem.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, handleMoreApi } from "@/apis/publicApi.js";
  export default {
    components:{ GoodsItem, GoodsItemFive, SpecialItem},
    data(){
      return{
        pageImgArr:{},
        goodsStyle:{width:'3.27rem',padding:'0.1rem',marginRight:'0.15rem'},
        pageGoodsIds:[
          1596215,1594213,1591527,1591529,1591531,1591533,1591555,1591553,1590021,1590019,1591525,1591523,1569351,1589973,
          1596207,1596211,1589967,1589969,1589971,1589961,1589963,1589975,1590027,1591749,1591753,1591755,1591763,1591771,
          1596209,1596213,1591767,1591773,1591769,1591775,1591777,1591779,1591757,1591747,1589945,1589947,1591759,1591761
        ],
        pageGoodsIdArr:[],
        moreData:{
          reqestIds:'70743,67969,70877,70819,70801,70797,70777,70815,70759,70765,70839,70783,70441,70855,70809,70093,70811,70813,70857,70955,70937,70901,70845,70859,70945,70957',
          specialArrList:[]
        }
      }
    },
    created(){
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.initPageImg();
      this.getGoodsAction();
    },
    mounted(){
      let that=this;
      this.moreSpecial();
    },
    methods:{
      initPageImg(){
        this.pageImgArr=[
          require('../../../assets/img/fashionSpace/fashionSpace01.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace02.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace03.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace04.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace05.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace06.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace07.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace08.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace09.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace10.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace11.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace12.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace13.jpg'),
          require('../../../assets/img/fashionSpace/fashionSpace14.jpg')
        ]
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsAction(){
        let param = this.pageGoodsIds.toString();
        getGoodsListApi(param).then(res =>{
          let limitTop = 3,perPageNum=14;
          for (let index = 0; index < limitTop; index++) {
            let element = res.data.slice(index*perPageNum,(index+1)*perPageNum);
            this.pageGoodsIdArr.push(element);
          }
        });
      },
      moreSpecial() {
        handleMoreApi(this.moreData.reqestIds).then(res => {
          this.moreData.specialArrList = res.data;
        });
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").includes(e);
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      }
    }
  }
</script>
<style lang="less" scoped>
.relative{
  position: relative;
  #share{
    width: 1rem;
    height: 0.45rem;
    line-height: 0.45rem;
    text-align: center;
    font-size: 0.3rem;
    color: #ffffff;
    position: absolute;
    top: 0.2rem;right: 0;
    background: #f77c09;
    border-radius: 0.45rem 0 0 0.45rem;
  }
}
.module-container{
  .wrapper{
    margin: 0 0.3rem;
    background: #f3f6f9;
  }
  .goods-btn{
    width: 3.72rem;
    height: 100%;
    position: absolute;
    top: 0;right: 0.35rem;
    font-size: 0.24rem;
    color: #666;
    del,i{
      font-style: normal;
      font-size: 0.3rem;
    }
    .prev{
      position: absolute;
      bottom: 0.9rem;right: 0.35rem;
    }
    .curr{
      color: #A90504;
      font-weight: 650;
      position: absolute;
      bottom: 0.45rem;right: 0.35rem;
    }
    &.bottom{
      .prev{bottom: 1.05rem;}
      .curr{bottom: 0.64rem;}
    }
  }
  .scroll-box{
    width: 100%;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .scroll-box::-webkit-scrollbar{width: 0;height: 0}
  .scroll-wrapper{
    display: flex;
    flex-wrap: wrap;
    padding: 0 0.12rem;
    .goods:nth-child(6n){
      margin-right: 0;
    }
  }
}

.goods-container{
  display: flex;
  flex-wrap: wrap;
  font-family: '微软雅黑';
  padding: 0.1rem 0.1rem 0rem;
  font-size: 0.3rem;
}
.more-title{
  line-height: 0.75rem;
  color: #333;
  background:#CC1416;;
  font-size: 0.3rem;
  text-align: center;
  font-weight: 600;
}
.more {
  background: #fff;
  .special {
    position: relative;
    width: 6.8rem;
    margin: 0.1rem auto 0;
  }
  .info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 0.6rem;
    padding: 0 0.3rem;
    line-height: 0.6rem;
    color: #333;
    font-size: 0.28rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    .title {
      width: 55%;
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .date {
      width: 30%;
      height: 100%;
      text-align: right;
    }
  }
}
</style>